<!-- @file PC 端报名观看登录入口 -->
<template>
  <div class="c-pc-enroll-login">
    <form-wrap
      label-model="header"
      :form-data="formData"
      :form-rules="formRules"
      :submit-action="submitLoginForm"
    >
      <!-- 手机号验证 -->
      <template v-if="enrollAuthType === EnrollAuthType.Mobile">
        <!-- 手机号输入 -->
        <form-item
          :label="enrollAuthName"
          required
          form-field="phoneNumber"
        >
          <pc-form-phone-input
            v-model="formData.phoneNumber"
            :placeholder="enrollAuthTips"
            :area-code.sync="formData.areaCode"
          />
        </form-item>
        <!-- 图片验证码 -->
        <form-item v-if="smsVerifyEnabled">
          <pc-form-image-verify-input
            ref="imageVerifyInputRef"
            v-model="formData.imageCaptcha"
            :image-id.sync="formData.imageId"
          />
        </form-item>
        <!-- 短信验证码 -->
        <form-item
          v-if="smsVerifyEnabled"
          form-field="smsCode"
        >
          <pc-form-sms-verify-input
            v-model="formData.smsCode"
            :area-code="formData.areaCode"
            :phone-number="formData.phoneNumber"
            :sms-scene="SmsScene.Enroll"
            :image-id="formData.imageId"
            :image-captcha="formData.imageCaptcha"
            :image-verify-input-ref="imageVerifyInputRef"
          />
        </form-item>
      </template>

      <!-- 邮箱验证 -->
      <template v-if="enrollAuthType === EnrollAuthType.Email">
        <form-item
          :label="enrollAuthName"
          required
          form-field="email"
        >
          <pc-form-input
            v-model="formData.email"
            :placeholder="enrollAuthTips"
          />
        </form-item>
      </template>

      <div class="c-pc-enroll-login__submit">
        <form-submit-button
          class="c-pc-enroll-login__submit__button"
          :size="ButtonSize.Small"
          :text="$lang('base.enterLive')"
          debounce-submit
        />
        <normal-button
          class="c-pc-enroll-login__submit__button"
          :size="ButtonSize.Small"
          :type="ButtonType.Info"
          :text="$lang('base.cancel')"
          @click="onClickCancel"
        />
      </div>
    </form-wrap>
  </div>
</template>

<script setup lang="ts">
import { ButtonSize, ButtonType } from '@/components/common-base/normal-button/types';
import FormWrap from '@/components/common-base/form/form-wrap.vue';
import FormItem from '@/components/common-base/form/form-item.vue';
import PcFormPhoneInput from '@/components/common-base/form/form-phone-input/pc-form-phone-input.vue';
import PcFormImageVerifyInput from '@/components/common-base/form/form-image-verify-input/pc-form-image-verify-input.vue';
import PcFormSmsVerifyInput from '@/components/common-base/form/form-sms-verify-input/pc-form-sms-verify-input.vue';
import PcFormInput from '@/components/common-base/form/form-input/pc-form-input.vue';
import FormSubmitButton from '@/components/common-base/form/form-submit-button.vue';
import NormalButton from '@/components/common-base/normal-button/normal-button.vue';

import { SmsScene, EnrollAuthType } from '@polyv/live-watch-sdk';
import { useEnrollStore } from '@/store/use-enroll-store';
import { storeDefinitionToRefs } from '@/plugins/pinia/util';

import { enrollLoginEmits, useEnrollLogin } from './hooks/use-enroll-login';

const emit = defineEmits(enrollLoginEmits());

const { enrollAuthType, smsVerifyEnabled, enrollAuthName, enrollAuthTips } =
  storeDefinitionToRefs(useEnrollStore);

const { imageVerifyInputRef, formData, formRules, submitLoginForm, onClickCancel } = useEnrollLogin(
  {
    emit,
  },
);
</script>

<style lang="scss">
.c-pc-enroll-login {
  padding: 24px 0;
  .c-form-item {
    width: 344px;
    margin: 0 auto 24px;
  }
}

.c-pc-enroll-login__submit {
  display: flex;
  justify-content: center;
  padding-top: 8px;

  .c-pc-enroll-login__submit__button {
    margin: 0 8px;
  }
}
</style>
